<template>
  <div id="classify">
    <!-- 导航栏 -->
    <van-search
      shape="round"
      background="#ffcc00"
      placeholder="请输入搜索关键词"
    />
    <!-- 上部左右滑动 -->
    <div class="leftMove">
      <ul>
        <li>
          <img src="@/assets/classifyImg/1.png" alt="" />
          <div>水果鲜花</div>
        </li>
        <li>
          <img src="@/assets/classifyImg/5.png" alt="" />
          <div>蔬菜</div>
        </li>
        <li>
          <img src="@/assets/classifyImg/3.png" alt="" />
          <div>肉禽蛋类</div>
        </li>
        <li>
          <img src="@/assets/classifyImg/7.png" alt="" />
          <div>速冻食品</div>
        </li>
        <li>
          <img src="@/assets/classifyImg/5.png" alt="" />
          <div>酒水饮料</div>
        </li>
        <li>
          <img src="@/assets/classifyImg/6.png" alt="" />
          <div>海鲜水产</div>
        </li>
        <li>
          <img src="@/assets/classifyImg/7.png" alt="" />
          <div>粮油调味</div>
        </li>
      </ul>
    </div>
    <!-- 下部选项卡切换 -->
    <div class="change">
      <van-sidebar v-model="activeKey">
        <van-sidebar-item title="全部" />
        <van-sidebar-item title="打折专区" />
        <van-sidebar-item title="时令水果" />
        <van-sidebar-item title="人气推荐" />
        <van-sidebar-item title="葡提浆果" />
        <van-sidebar-item title="柑橘橙柚" />
        <van-sidebar-item title="西瓜蜜瓜" />
        <van-sidebar-item title="苹果梨蕉" />
        <van-sidebar-item title="热带水果" />
        <van-sidebar-item title="新鲜果切" />
        <van-sidebar-item title="产地量贩" />
      </van-sidebar>
      <div class="right">
        <ul>
          <li v-for="item in goodslist" :key="item.id">
            <img :src="item.url" alt="" @click="move(item.id)" />
            <div>
              <div class="top">{{ item.name }}</div>
              <div class="mid">{{ item.des }}</div>
              <div class="price">￥{{ item.price.toFixed(2) }}</div>
              <div class="cartIcon">
                <van-icon name="shopping-cart-o" @click="fn(item.id)" />
              </div>
            </div>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>

<script>
import { Toast } from "vant";
import { mapState } from "vuex";
export default {
  name: "Classify",
  data() {
    return {
      activeKey: 0,
      count: 0,
      isLoading: false,
    };
  },

  computed: {
    ...mapState(["goodslist"]),
    ...mapState(["cartlist"]),
  },
  methods: {
    move(id) {
      this.$router.push("/detail" + "?id=" + id);
    },
    fn(id) {
      this.$store.commit("inCart", id);
      Toast.success("加入成功！");
    },
    isShow(index) {},
  },
};
</script>

<style lang="less" scoped>
/deep/.van-search {
  height: 88px !important;
  input::-webkit-input-placeholder {
    text-align: center;
    font-size: 30px;
  }
  .van-icon {
    font-size: 30px;
    position: relative;
    left: 250px;
    top: 3px;
  }
  :hover {
    .van-icon {
      display: none;
    }
  }
  /deep/.van-search__content {
    width: 748px;
    height: 58px;
    line-height: 58px;
    // font-size: 20px;
  }
}
.leftMove {
  width: 100%;
  height: 188px;
  background-color: #ffcc00;
  padding-top: 38px;
  ul {
    display: flex;
    overflow: auto;
    li {
      margin: 0 25px;
      div {
        font-size: 24px;
        color: white;
        text-align: center;
      }
      img {
        width: 103px;
        height: 83px;
      }
    }
  }
  ul::-webkit-scrollbar {
    display: none;
  }
}
.change {
  display: flex;
  background-color: #fff;
  .van-sidebar {
    width: 150px;
  }
  .right {
    width: 678px;

    height: 1100px;
    overflow: auto;
    ul {
      display: flex;
      flex-direction: column;
      li {
        display: flex;
        position: relative;
        img {
          width: 235px;
          height: 237px;
        }
        div {
          .top {
            margin-top: 10px;
            width: 337px;
            height: 78px;
            font-size: 30px;
            font-family: PingFang SC;
            font-weight: 550;
            color: #646464;
            line-height: 45px;
          }
          .mid {
            // width: 191px;
            height: 23px;
            font-size: 22px;
            margin-top: 20px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #909090;
            line-height: 40px;
          }
          .price {
            width: 70px;
            height: 20px;
            margin-top: 42px;
            font-size: 20px;
            font-family: PingFang SC;
            font-weight: 400;
            color: #e93f33;
          }
          .cartIcon {
            position: absolute;
            top: 175px;
            left: 596px;
            width: 44px;
            height: 44px;
            line-height: 44px;
            text-align: center;
            background: #ffcc00;
            border-radius: 16px;
            font-size: 30px;
            color: white;
          }
        }
      }
    }
  }
  .right::-webkit-scrollbar {
    display: none;
  }
}
/deep/.van-sidebar-item--select::before {
  background: #fff !important;
}
.van-sidebar-item {
  width: 150px;
  height: 100px;
  line-height: 50px;
  font-size: 30px;
  font-weight: 550;
  font-family: PingFang SC;
  text-align: center;
}
</style>
